<template>
    <div class="vheader">
        <div class="logo-kk" @click="handleHome">
            <img src="../assets/logo.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
    name: 'Vheader',
    methods: {
        handleHome() {
            this.$router.replace('/');
        }
    }
}
</script>

<style lang="less" scoped>
.vheader {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    .logo-kk {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid rgba(25 137 250 / 50%);
        transition: box-shadow .5s, width .5s, height .5s;
        display: flex;
        justify-content: center;
        align-items: center;

        &:hover {
            box-shadow: 0px 0px 4px 2px rgb(25 137 250 / 50%);
            width: 52px;
            height: 52px;
        }

        img {
            width: 85%;
            cursor: pointer;
            margin-top: 12px;
        }
    }
}
</style>